<template>
    <div id="home">
        <nav-bar class="home-nav">
           <div slot="center">首页</div>            
        </nav-bar>
        <home-swiper :banners = "banners"/>       
        <recommend-view :recommends = "recommends" />
        <feature-view/>
        <div ref="zyScroll" >
        <tab-control :titles= "['流行','新款','精选']" 
        :class= "conFixed === true ? 'isFixed' :''"
         /> 
        </div>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
          <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
          <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
          <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
 
    </div>

</template>

<script>
import NavBar from 'components/common/navbar/NavBar.vue'
import HomeSwiper from './childComps/HomeSwiper.vue'
import RecommendView from './childComps/RecommendView.vue'
import FeatureView from './childComps/FeatureView.vue'
import TabControl from '../../components/content/tabControl/TabControl.vue'

import {
  getHomeMultidata,
  getHomeGoods
  } from 'network/home'



export default {
    name:"Home",
    components: { 
      NavBar,
      HomeSwiper,
      RecommendView,
      FeatureView,
      TabControl,
        TabControl
      },
     data() {
      return {
        banners: [],
        recommends: [],
        controls:false,
        conFixed: false,
        goods:{
          'pop':{page:0,list:[]},
          'news':{page:0,list:[]},
          'sell':{page:0,list:[]}
        }
      }
    },
    mounted() {
    window.addEventListener("scroll", this.handleScroll, true);//监听鼠标滚轮
  }, 
     methods: {
       handleScroll: function() {
        let offsetTop = this.$refs.zyScroll.getBoundingClientRect().top;//需要吸顶的box距离顶部的值
        this.conFixed = offsetTop <= 50;
        //判断当box距离顶部距离<=0时,this.zyFixed为true,给box添加isFixed类
       }
    },
    created() {
      // 1.请求多个数据
      getHomeMultidata().then(res => {
        // this.result = res;
        this.banners = res.data.banner.list;      
        this.recommends = res.data.recommend.list;
      })

      //2.请求商品数据
      getHomeGoods('pop',1).then(res => {
        console.log(res);
      })
    },
 

}
</script>
<style scoped>
   .home-nav{
       background: salmon;
       color: #fff;
      
   }
    #home {
    padding-top: 44px;
    padding-bottom: 100px;
    height: 100vh;

    position: relative;
  }
   .home-nav {
    background-color: var(--color-tint);
    color: #fff;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 9;
  }
  .control-stop{
    
  }
  .isFixed{
   position: fixed;
   top: 41px;
   background: #fff;
   
   width: 100%;
  }
</style>